<template>
  <div :id="demo_class" :style="{height:style_height.height,width:style_height.width}"></div>
</template>

<script>
import {get_work_hour_order} from "@/api/cockpit/data";
import {inject, onMounted, reactive} from "vue"
import {getStyleByEl} from "@/utils/dom/get_dom_style";

export default {
  name: "auto_bar",
  props: {
    demo_class: ""
  },
  setup(props, context) {
    const style_height = reactive({
      height: "",
      width: ""
    })
    let echarts = inject("echarts");//引入

    const handle_data = (data, field) => {
      let data_item = []
      for (let i = 0; i < data.length; i++) {
        data_item.push(data[i][field])
      }
      return data_item;
    }

    const get_style_dom = (dom) => {
      const el = document.getElementById(dom);
      const style = getStyleByEl(el)
      const height = style.height;
      const width = style.width;
      return {
        height,
        width
      }
    }

    const back_option = async () => {

      const {height, width} = get_style_dom(props.demo_class)
      style_height.height = height;
      style_height.width = width;

      const data_list = await get_data()
      const x_data = handle_data(data_list, 'realName')
      // const x_data = ["c1","c2","c3"]
      //今天
      const y_data1 = handle_data(data_list, 'todayNum')
      // //昨天
      const y_data2 = handle_data(data_list, 'yesterdayNum')
      // //前天
      const y_data3 = handle_data(data_list, 'beforedayNum')
      let myChart = echarts.init(document.getElementById(props.demo_class));
      myChart.hideLoading();
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '设备工作时长排序',
          subtext: '',
          left: 'center',
          textStyle: {
            // width:200
            color: '#3A7BD5',
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          position: [100, 100]

        },
        grid: {
          left: 40,
          right: 10,
          bottom: 20,
          top: 30,
        },
        legend: {
          data: ['前日', '昨日', '今日'],
          right: 'bottom',
          show: true,
          textStyle: {
            color: ["white", "white", "white"]
          },
          y: 'bottom',    //延Y轴居中
          x: 'right' //居右显示
          // left: "right",
          // top: "center",
        },
        xAxis: {
          show: false,
          type: 'value',
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        dataZoom: [
          {
            yAxisIndex: 0,
            show: false,
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 3 // 一次性展示五个。
          }
        ],
        yAxis: {
          type: 'category',
          data: x_data,
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
        },
        series: [{
          name: '前日',
          type: 'bar',
          // barGap: '-100%',
          label: {
            normal: {
              show: true,
              position: 'insideRight' //insideLeft
            },
          },
          backgroundStyle: {
            color: "white"
          },
          data: y_data3
        }, {
          name: '昨日',
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'insideRight' //inside
            },
            color: "#fff"
          },
          backgroundStyle: {
            color: "white"
          },
          data: y_data2
        }, {
          name: '今日',
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'insideRight'
            },
            color: "#fff"
          },
          backgroundStyle: {
            color: "#fff"
          },
          data: y_data1
        }


        ]
      };
      await myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      // 定时器
      if (x_data.length >= 4) {
        setInterval(function () {
          // 每次向后滚动一个，最后一个从头开始。
          if (option.dataZoom[0].endValue == x_data.length - 1) {
            option.dataZoom[0].endValue = 3;
            option.dataZoom[0].startValue = 0;
          } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
          }
          myChart.setOption(option);
        }, 3000);
      }
    }
    /**
     * 获取数据
     * */
    const get_data = async () => {
      let data = []
      const res = await get_work_hour_order()
      console.log("今日昨日", res)
      if (res.code === 1) {
        data = res.data;
        return data
        //
      }
      return data;
    }

    onMounted(() => {
      // back_option()
    })
    const init = ()=>{
      back_option()
    }

    return{
      style_height,
      init
    }
  },
  // methods: {
  //   handle_data(data, field) {
  //     let data_item = []
  //     for (let i = 0; i < data.length; i++) {
  //       data_item.push(data[i][field])
  //     }
  //     return data_item;
  //   },
  //   /**
  //    * 获取数据
  //    * */
  //   async get_data() {
  //     let data = []
  //     const res = await get_work_hour_order()
  //     console.log("今日昨日", res)
  //     if (res.code === 1) {
  //       data = res.data;
  //       return data
  //       //
  //     }
  //     return data;
  //   },
  //   async back_option() {
  //     const data_list = await this.get_data()
  //     const x_data = this.handle_data(data_list, 'realName')
  //     // const x_data = ["c1","c2","c3"]
  //     //今天
  //     const y_data1 = this.handle_data(data_list, 'todayNum')
  //     // //昨天
  //     const y_data2 = this.handle_data(data_list, 'yesterdayNum')
  //     // //前天
  //     const y_data3 = this.handle_data(data_list, 'beforedayNum')
  //     let myChart = this.$echarts.init(document.getElementById("main_auto_bar"));
  //     myChart.hideLoading();
  //     // 指定图表的配置项和数据
  //     let option = {
  //       title: {
  //         text: '设备工作时长排序',
  //         subtext: '',
  //         left: 'center',
  //         textStyle: {
  //           // width:200
  //           color: '#3A7BD5',
  //         },
  //       },
  //       tooltip: {
  //         trigger: 'axis',
  //         axisPointer: { // 坐标轴指示器，坐标轴触发有效
  //           type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
  //         },
  //         position: [100, 100]
  //
  //       },
  //       grid: {
  //         left: 40,
  //         right: 10,
  //         bottom: 20,
  //         top: 30,
  //       },
  //       legend: {
  //         data: ['前日', '昨日', '今日'],
  //         right: 'bottom',
  //         show: true,
  //         textStyle: {
  //           color: ["white", "white", "white"]
  //         },
  //         y: 'bottom',    //延Y轴居中
  //         x: 'right' //居右显示
  //         // left: "right",
  //         // top: "center",
  //       },
  //       xAxis: {
  //         show: false,
  //         type: 'value',
  //         axisLine: {
  //           show: false
  //         },
  //         splitLine: {
  //           show: false
  //         }
  //       },
  //       dataZoom: [
  //         {
  //           yAxisIndex: 0,
  //           show: false,
  //           type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
  //           startValue: 0, // 从头开始。
  //           endValue: 3 // 一次性展示五个。
  //         }
  //       ],
  //       yAxis: {
  //         type: 'category',
  //         data: x_data,
  //         axisLine: {
  //           show: false
  //         },
  //         splitLine: {
  //           show: false
  //         },
  //         axisTick: {
  //           show: false
  //         },
  //       },
  //       series: [{
  //         name: '前日',
  //         type: 'bar',
  //         // barGap: '-100%',
  //         label: {
  //           normal: {
  //             show: true,
  //             position: 'insideRight' //insideLeft
  //           },
  //         },
  //         backgroundStyle: {
  //           color: "white"
  //         },
  //         data: y_data1
  //       }, {
  //         name: '昨日',
  //         type: 'bar',
  //         label: {
  //           normal: {
  //             show: true,
  //             position: 'insideRight' //inside
  //           },
  //           color: "#fff"
  //         },
  //         backgroundStyle: {
  //           color: "white"
  //         },
  //         data: y_data2
  //       }, {
  //         name: '今日',
  //         type: 'bar',
  //         label: {
  //           normal: {
  //             show: true,
  //             position: 'insideRight'
  //           },
  //           color: "#fff"
  //         },
  //         backgroundStyle: {
  //           color: "#fff"
  //         },
  //         data: y_data3
  //       }
  //
  //
  //       ]
  //     };
  //     await myChart.setOption(option);
  //     window.addEventListener("resize", function () {
  //       myChart.resize();
  //     });
  //     // 定时器
  //     if (x_data.length >= 4) {
  //       setInterval(function () {
  //         // 每次向后滚动一个，最后一个从头开始。
  //         if (option.dataZoom[0].endValue == x_data.length - 1) {
  //           option.dataZoom[0].endValue = 3;
  //           option.dataZoom[0].startValue = 0;
  //         } else {
  //           option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
  //           option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
  //         }
  //         myChart.setOption(option);
  //       }, 3000);
  //     }
  //   }
  // },
  mounted() {
    // this.back_option()
  }

}
</script>

<style lang="scss" scoped>
#main_auto_bar {
  height: 10rem;
  width: 90%;
}
</style>
